<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content"><text class="text-black text-bold">组织架构</text></block>
		</cu-custom>

		<view class="cu-form-group margin-top">
			<view class="content">
				<text @click="titleClick" :class="index<titlelist.length-1?'text-blue':'text-gray'" :data-id="index" v-for="(title,index) in titlelist">
					{{title.name}}
					<text v-show="titlelist.length>1 && index<titlelist.length-1" class="cuIcon-right"></text>
				</text>
			</view>
		</view>

		<view class="cu-list menu sm-border margin-top">
			<view @tap="addDepart" class="cu-item">
				<view class="content">
					<text class="text-blue"></text>
					<text class="text-grey">新增部门</text>
				</view>
				<view class="action">
					<image mode="widthFix" class="icon-add" src="../../../static/icon_add.png"></image>
				</view>
			</view>
		</view>

		<view name="selectdepart" class="cu-list margin-top-xs menu sm-border">
			<view class="cu-item" :key="index" v-for="(depart,index) in departmentlist">
				<view @click="changeDepart" :data-id="index" class="content">
					<text class="text-grey padding-left">{{depart.deptName}}</text>
				</view>
				<view class="action border-left">
					<button class="cuIcon-list bg-white text-blue" :data-id="index" @tap.stop="nextDepart">下级</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				titlelist: [],
				departmentlist: [],
				newdepart:null,
				parent: {}
			}
		},
		onShow() {
			var pages = getCurrentPages();
			if(pages.length==2){
				this.initData()
			}
		},
		onLoad(options) {
			if (typeof(options.depart) != 'undefined') {
				let data = JSON.parse(options.depart)
				let parent = {
					deptName: data.deptName,
					id: data.id
				}
				this.parent = parent
				this.departmentlist = data.childDepartment
				let titlelist = data.title
				titlelist.push({
					name: data.deptName
				})
				this.titlelist = titlelist
			} 
		},
		methods: {
			titleClick(e) {
				let index = e.currentTarget.dataset.id
				if (index < this.titlelist.length - 1) {
					console.log(this.titlelist.length - index - 1)
					uni.navigateBack({
						delta: this.titlelist.length - index - 1
					})
				}
			},
			nextDepart(e) {
				let index = e.currentTarget.dataset.id
				let depart = this.departmentlist[index]
				depart.title = this.titlelist
				// 列表页点击跳转
				let data = JSON.stringify(depart) // result传递的query参数。我们转为string
				uni.navigateTo({
					url:'department?depart='+data
				})
			},
			addDepart() {
				uni.navigateTo({
					url: 'add-department?parent=' + JSON.stringify(this.parent) + '&depth=' + this.titlelist.length
				})
			},
			changeDepart(e) {
				let index = e.currentTarget.dataset.id
				let department = this.departmentlist[index]
				let depart = {
					id:department.id,
					departname:department.deptName,
					mobile:department.mobile,
					address:department.address,
					description:department.description,
				}
				uni.navigateTo({
					url:'change-department?depart='+JSON.stringify(depart)
				})
			},
			initData() {
				uni.showLoading({
					title: '正在加载...'
				})
				uni.request({
					url: this.$constant.BASEURL + this.$constant.GET_DEPART_TREE,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						username: getApp().globalData.username,
						token: getApp().globalData.token,
						unitno: getApp().globalData.orgcode
					},
					success: (res) => {
						let data = res.data.data
						if (res.data.code == 0 && typeof(data) != 'undefined') {
							//处理部门数据
							let parent = {
								deptName: data[0].deptName,
								id: data[0].id
							}
							this.titlelist=[{
								name:data[0].deptName
							}]
							let departlist = data[0].childDepartment
							this.clearUser(departlist)
							this.departmentlist = departlist
							this.parent = parent
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				});

			},
			clearUser(departlist){
				let that = this
				// console.log(departlist)
				departlist.forEach(function(item){
					item.listUser=null
					if(item.childDepartment!=null&&item.childDepartment.length>0){
						that.clearUser(item.childDepartment)
					}
				})
			},
			//用来为列表加上选择标记 clicked
		},
	}
</script>

<style>
	.icon-add {
		width: 50upx;
		height: 50upx;
	}
	.padding-left {
		padding-left: 25upx;
	}

	.border-left {
		border-left: 1upx solid #dbdbdb;
		padding: 0upx 25upx;
	}

	button::after {
		border: none;
	}

	button[disabled] {
		background-color: #FFFFFF;
		opacity: 1;
		color: #aaaaaa;
	}

	.bottom-float {
		bottom: 0;
		width: 100%;
		position: fixed;
	}

	.cu-avatar.xsm {
		width: 68upx;
		height: 68upx;
		font-size: 1em;
	}
</style>
